<script setup lang="ts">
import type { LoginPatientInfoRespVO } from '@/api/patient';
import { reactive, ref } from 'vue';
import { PatientApi } from '@/api/patient';
import { SEX } from '@/enums';
import { LOGIN_TYPE } from '@/enums/login.enums';
import { buildAssetSource } from '@/utils';
import { normalizeBase64 } from '@/utils/download.utils';
import { validateIdCard } from '@/utils/idCard.utils';

const emit = defineEmits<{
  close: []
  submit: [LoginPatientInfoRespVO]
}>();

const show = ref(false);

function handleClose() {
  show.value = false;
  emit('close');
}

function validatorIdCard(value: string) {
  return validateIdCard(value);
}

function validatorPhone(value: string) {
  if (!/^1[3-9]\d{9}$/.test(value)) {
    return Promise.reject(new Error('请输入正确的手机号'));
  }
  return Promise.resolve();
}

const formRef = ref();

const formData = reactive({
  image: '',
  sex: SEX.MALE,
  name: '',
  idCard: '',
  phone: ''
});

const loading = ref(false);

async function handleFaceRegister() {
  await formRef.value.validate().then(res => {
    if (!res.valid)
      return Promise.reject(new Error(res.error));
  });
  loading.value = true;
  PatientApi.onFaceRegister({
    type: LOGIN_TYPE.FACE,
    idCard: formData.idCard,
    patientName: formData.name,
    sex: formData.sex,
    telephone: formData.phone,
    image: formData.image
  }).then(res => {
    handleClose();
    emit('submit', res);
  }).finally(() => {
    loading.value = false;
  });
}

function resetForm() {
  formData.image = '';
  formData.sex = SEX.MALE;
  formData.name = '';
  formData.idCard = '';
  formData.phone = '';
}

defineExpose({
  onOpen(image: string) {
    resetForm();
    formData.image = image;
    show.value = true;
  },
  onClose() {
    handleClose();
  }
});
</script>

<template>
  <view v-show="show" class="popup-overlay">
    <view class="app-popup">
      <view class="app-popup__hd">
        <view class="app-popup__title">
          个人信息录入
        </view>
        <view class="app-popup__desc">
          请填写您的个人信息
        </view>
        <view class="app-popup__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-popup__content">
        <view class="avatar" :style="{ '--bg-url': `url(${buildAssetSource('avatar-border.png')})` }">
          <image :src="normalizeBase64(formData.image)" class="h-full w-full" mode="aspectFill" />
        </view>
        <view class="form px-55">
          <wd-form ref="formRef" :model="formData">
            <view class="form-item">
              <view class="form-item__label">
                性别:
              </view>
              <view class="form-item__input">
                <wd-radio-group v-model="formData.sex" inline prop="sex" shape="button" size="large">
                  <wd-radio :value="SEX.MALE">
                    男
                  </wd-radio>
                  <wd-radio :value="SEX.FEMALE">
                    女
                  </wd-radio>
                </wd-radio-group>
              </view>
            </view>

            <view class="form-item">
              <view class="form-item__label">
                姓名:
              </view>
              <view class="form-item__input">
                <wd-input
                  v-model="formData.name" placeholder="请输入您的姓名" prop="name"
                  :rules="[{ required: true, message: '请输入姓名' }]"
                />
              </view>
            </view>

            <view class="form-item">
              <view class="form-item__label">
                身份证号:
              </view>
              <view class="form-item__input">
                <wd-input
                  v-model="formData.idCard" placeholder="请输入您的18位身份证号" prop="idCard"
                  :rules="[
                    { required: true, message: '请输入身份证号' },
                    { validator: validatorIdCard, required: true, message: '请输入正确的身份证号' }]"
                />
              </view>
            </view>

            <view class="form-item">
              <view class="form-item__label">
                手机号:
              </view>
              <view class="form-item__input">
                <wd-input
                  v-model="formData.phone" placeholder="请输入您的手机号" prop="phone"
                  :rules="[
                    { required: true, message: '请输入手机号' },
                    { validator: validatorPhone, required: true, message: '请输入正确的手机号' }]"
                />
              </view>
            </view>
          </wd-form>
        </view>

        <view class="flex-center">
          <view class="confirm-btn w-435">
            <wd-button block :loading="loading" @click="handleFaceRegister">
              确认信息
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.popup-overlay {
  @apply flex-center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.app-popup {
  width: 886px;
  background: #fff;
  padding-bottom: 50px;
  border-radius: 20px;

  .app-popup__hd {
    position: relative;
    padding-left: 46px;
    padding-top: 56px;

    .app-popup__title {
      font-size: 54px;
      font-weight: bold;

      color: #333333;
    }

    .app-popup__desc {
      font-size: 24.25px;
      color: var(--secondary-text-color);
      margin-top: 20px;
    }

    .app-popup__close {
      position: absolute;
      top: 45px;
      right: 64px;
    }
  }

  .app-popup__content {
    padding: 0 20px;
    margin-top: 50px;

    .avatar {
      margin: 0 auto;
      width: 302px;
      height: 302px;
      border-radius: 50%;
      box-sizing: border-box;
      background: var(--bg-url);
      background-size: 100% 100%;
      overflow: hidden;
      padding: 5px;

      image {
        border-radius: 50%;
      }
    }

    .form-item {
      margin-bottom: 44px;

      .form-item__label {
        font-size: 36px;
        color: #333333;
        font-weight: 500;
      }

      .form-item__input {
        --wot-input-bg: #eff5ff;
        margin-top: 20px;
        --wot-input-inner-height: 90px;
        --wot-input-border-color: transparent;
        --wot-input-fs: 32px;
        --wot-input-color: var(--text-color);
        --wot-input-placeholder-color: #767676;

        --wot-radio-size: 32px;
        --wot-radio-large-label-fs: 32px;
        --wot-radio-checked-color: var(--primary);
        --wot-radio-button-height: 70px;

        --wot-form-item-error-message-font-size: 24px;

        :deep(.wd-input) {
          border-radius: 8px;
          padding-left: 38px;
          padding-bottom: 12px;

          &:after {
            height: 0;
          }
        }

        :deep(.wd-radio) {
          --wot-radio-label-color: var(--text-color);
          --wot-radio-button-min-width: 120px;

          .wd-radio__label {
            line-height: 55px;
          }
        }
      }
    }

    .confirm-btn {
      --wot-button-medium-height: 90px;
      --wot-button-medium-fs: 36px;
      --wot-button-medium-loading: 36px;
      margin-top: 47px;

      :deep(.wd-button) {
        font-weight: bold;
      }
    }
  }
}
</style>
